<template>
  <div class="home-wrap">
    <!-- banner图  -->
    <div class="banner-box">
      <div class="w1200">
        <div class="input-box">
          <h1>深圳市大数据平台</h1>
          <el-input placeholder="请输入您要搜索的事项" v-model="searchVal" class="input-search">
            <el-button type="primary" slot="append">搜索</el-button>
          </el-input>
        </div>
        <ul class="data-info">
          <li>
            <span>116,618 <small>万条</small></span>
            <strong>数据总量</strong>
          </li>

          <li>
            <span>254 <small>个</small></span>
            <strong>接口服务</strong>
          </li>

          <li>
            <span>342 <small>万次</small></span>
            <strong>服务调用次数</strong>
          </li>

          <li>
            <span>1,080 <small>个</small></span>
            <strong>数据资源总量</strong>
          </li>
        </ul>
      </div>
    </div>

    <!-- 丰富、安全、稳定的产品及服务   -->
    <div class="service-box wow fadeInUp">
      <div class="w1200">
        <h1>丰富、安全、稳定的产品及服务</h1>
        <a href="javascript:;">查看更多 <i class="el-icon-arrow-right"></i></a>

        <smooth-nav
          class="service-nav "
          :navList="menuNav"
          :navActive="navActive"
          :parameter="['name']"
          @tagsClick="navActiveHandle"
        >
          <template slot-scope="{row}">
            <div class="service-icon">
              <img :src="row.img" :alt="row.name">
              <span >{{row.name}}</span>
            </div>
          </template>
        </smooth-nav>
      </div>
    </div>

    <div class="service-cont wow fadeInUp">
      <div class="w1200">
        <div class="el-col-8 left-cont">
          <h3>工具套件介绍</h3>
          <p>大数据开发套件工具，是一站式数据采集、数据治理、数据开发的系列工具，降低大数据应用开发门槛和业务开发难度，降低运维管理复杂度。</p>

          <ul>
            <li>
              一站式建设数仓，无需切换多个工具;
            </li>
            <li>
              管理多种大数据服务，实现跨服务的作业开发;
            </li>
            <li>
              在线对SQL/Shell/Python等脚本进行编辑调试；
            </li>
            <li>
              拖拽方式进行复杂工作流编排;
            </li>
            <li>
              轻松实现任务的调度和运维管理。
            </li>
          </ul>
        </div>
        <div class="el-col-14 el-col-offset-1 right-cont">
          <div class="el-col-12">
            <h4>数据汇聚工具</h4>
            <p>数据汇聚工具是大数据中心的统一数据入口，解决数据的融合问题，实现数据统一采集汇聚，提供丰富的采集汇聚能力，实现多源异构、跨部门、跨系统的离线数据采集以及实时数据采集能力支撑。</p>
          </div>
          <div class="el-col-12">
            <h4>数据治理工具</h4>
            <p>数据治理与管理系统通过对数据全生命周期、端到端的全链路透明化管控，实现“数据模型标准化、数据关系脉络化、数据加工可视化、数据质量度量化、数据服务自动化”。</p>
          </div>

          <div class="el-col-12">
            <h4>数据开发工具</h4>
            <p>数据开发平台可管理多种大数据服务，提供一站式的大数据开发环境、全托管的大数据调度能力，极大降低用户使用大数据的门槛，帮助用户快速构建大数据处理中心。</p>
          </div>

          <div class="el-col-12">
            <h4>可视化分析工具</h4>
            <p>多样化分析展现能力，建立一站式数据分析环境，实现拖拽式交互分析，并集成丰富的工具和算法，扩充全文分析、关系网络、图分析等分析工具，以支持多种数据源配置，实现各种视觉风格及载体的数据呈现。</p>
          </div>

          <div class="el-col-24">
            <h4>数据开放工具</h4>
            <p>提供高性能、高可用的API托管服务，从而帮助服务的开发者便捷地对外提供服务，而不用考虑安全控制、流量控制等问题，在数据接口服务层统一提供安全认证，流量控制，黑白名单等功能的实现。</p>
          </div>
        </div>
      </div>
    </div>

    <!--  新闻及政策  -->
    <div class="news-box ">
      <div class="w1200">
        <h1>新闻及政策</h1>

        <div class="cont-view wow fadeInUp">
          <div class="left-view">
            <div class="swiper-box">
              <img src="@/assets/img/home/news.png" alt="新闻及政策">
              <h2>市中小企业服务局关于应对新型冠状病毒肺炎疫情简化办理上市拟上市企业协调函相市中小企业服务局</h2>
              <p>市中小企业服务局关于应对新型冠状病毒肺炎疫情简化办理上市拟上市企业协调函相市中小企业</p>
            </div>

            <a class="more" href="javascript:;">了解详情</a>
          </div>

          <div class="right-view">
            <ul>
              <li>
                <h2>深圳市发改委李希马兴瑞到罗湖区调研检查统筹推进疫情防控和经济社会发展工作</h2>
                <p>深圳市发改委李希马兴瑞到罗湖区调研检查统筹推进疫情防控和经济社会发展工作深圳市发改委李希马兴瑞到罗湖区调研检查统筹推进疫情防控和经济社会发展工作深圳市发改委李希马兴瑞到罗湖区调研检查统筹推进疫情防控和经济社会发…</p>
                <span>发布时间：2020-10-14</span>
              </li>
              <li>
                <h2>深圳市中小企业服务局关于开展2021年广东省中小企业公共服务示范平台中小企业公共服务（融资服务…</h2>
                <p>深圳市中小企业服务局关于开展2021年广东省中小企业公共服务示范平台中小企业公共服务融资服务深圳市中小企业服务局关于开展2021年广东省中小企业公共服务示范平台中小企业公共服务融资服务深圳市中小企业服务局关于开深…</p>
                <span>发布时间：2020-10-14</span>
              </li>
              <li>
                <h2>深圳暂不恢复“限外”措施 将综合考虑疫情防控等情况审慎恢复限行措施的通知公告</h2>
                <p>深圳暂不恢复“限外”措施 将综合考虑疫情防控等情况审慎恢复限行措施的通知公告深圳暂不恢复“限外”措施 将综合考虑疫情防控等情况审慎恢复限行措施的通知公告深圳暂不恢复“限外”措施 将综合考虑疫情防控等情况审慎恢复限行措施…</p>
                <span>发布时间：2020-10-14</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="list-box wow fadeInUp">
          <div class="list-view">
            <div class="top">
              <h1>新闻动态</h1>
              <a href="javascript:;">查看更多 <i class="el-icon-arrow-right"></i></a>
            </div>

            <ul>
              <li>
                <a href="javascript:;">
                  <strong>最新</strong>
                  <span>工信部发文加强通信短信息管理加强通信短信息…</span>
                  <small>2020-10-14</small>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <span>中小企业服务局关于应对新型冠状病毒肺炎疫情简化办理…</span>
                  <small>2020-10-14</small>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <span>关于开展2021年广东省中小企业公共服务示范平台（融…</span>
                  <small>2020-10-14</small>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <span>中共中央政治局常委会召开会议习近平主持会议…</span>
                  <small>2020-10-14</small>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <span>深圳市发改委李希马兴瑞到罗湖区调研检查统筹推进疫情…</span>
                  <small>2020-10-14</small>
                </a>
              </li>
            </ul>
          </div>

          <div class="list-view">
            <div class="top">
              <h1>政策法规</h1>
              <a href="javascript:;">查看更多 <i class="el-icon-arrow-right"></i></a>
            </div>

            <ul>
              <li>
                <a href="javascript:;">
                  <span>市中小企业服务局关于办理上市拟上市企业协调函相关资讯…</span>
                  <small>2020-10-14</small>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <span>深圳市中小企业服务局关于开展2021年广东省中小企业公……</span>
                  <small>2020-10-14</small>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <span>市中小企业服务局关于办理上市拟上市企业协调函相关资讯</span>
                  <small>2020-10-14</small>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <span>2022年工业设计发展扶持计划</span>
                  <small>2020-10-14</small>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <span>深圳市中小企业服务局关于开展2021年广东省中小企业公</span>
                  <small>2020-10-14</small>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data () {
    return {
      searchVal: '',
      navActive : 0,
      menuNav: [{
        name: "热门服务",
        img: require('@/assets/img/home/service1.png')
      },{
        name: "数据湖",
        img: require('@/assets/img/home/service2.png')
      },{
        name: "运算引擎",
        img: require('@/assets/img/home/service3.png')
      },{
        name: "大数据开发套件",
        img: require('@/assets/img/home/service4.png')
      },{
        name: "安全",
        img: require('@/assets/img/home/service5.png')
      },{
          name: "政务云",
        img: require('@/assets/img/home/service6.png')
        }],
    }
  },
  methods: {
    navActiveHandle(){},
  },
}
</script>

<style scoped lang="scss">
@import "~@/styles/mixin";

.banner-box{
  overflow: hidden;
  background: url('~@/assets/img/home/banner.png')no-repeat;
  background-size: cover;
  background-position: bottom;
  .input-box{
    margin-top: 191px;
    text-align: center;
    h1{
      font-size: 48px;
      font-family: YouSheBiaoTiHei;
      color: #FFFFFF;
      line-height: 48px;
      font-style:oblique;
    }

    .input-search{
      width: 550px;
      height: 60px;
      margin: 34px auto 65px;
      ::v-deep input{
        height: 60px;
      }
      ::v-deep .el-input-group__append{
        background: #228AFF;
        color: #fff;
        border-color: #228AFF;
      }
    }
  }
  .data-info{
    display: flex;
    margin-bottom: 80px;
    li{
      flex: 1;
      color: rgba(255,255,255,.5);
      position: relative;
      text-align: center;
      &:before{
        content: '';
        position: absolute;
        right: 0;
        top: 3px;
        bottom: 3px;
        width: 1px;
        background: #fff;
      }
      &:last-child:before{
        width: 0;
      }
      span{
        font-size: 32px;
        font-family: DINCondensed-Bold, DINCondensed;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 38px;
        small{
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          line-height: 22px;
          color: rgba(255,255,255,.5);
        }
      }
      strong{
        display: block;
        margin-top: 5px;
        font-weight: 400;
      }
    }
  }
}

.service-box{
  padding: 80px 0 0;
  text-align: center;
  h1{
    font-size: 32px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #22223B;
    line-height: 45px;
    letter-spacing: 1px;
    margin-bottom: 15px;
  }
  a{
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1072E0;
    line-height: 24px;
  }

  // 修改顶部导航样式
  .service-nav {
    display: flex;
    margin: 52px 0 0;
    user-select: none;
    width: 100%;
    ::v-deep li {
      flex: 1;
      cursor: pointer;
      line-height: 50px;
      margin: 0 40px 15px;
      color: rgba(255,255,255,.5);
      z-index: 99;
      font-size: 18px;
      &:first-child{
        margin-left:0 ;
      }
      &.active{
        ::v-deep span{
          color: #1072E0;
        }
      }
    }

    ::v-deep .smooth-before {
      background: #1072E0;
      bottom: 0;
      top: inherit;
      height:3px;
      border: none;
      border-radius: 0;
    }
  }

  .service-icon{
    text-align: center;
    white-space: nowrap;
    img{
      display: block;
      margin: 0 auto;
    }
    span{
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 24px;
    }
  }
}

.service-cont{
  height: 570px;
  background: url('~@/assets/img/home/bg1.png')no-repeat;
  background-size: cover;
  background-position: bottom;
  .left-cont{
    h3{
      margin-top: 64px;
      font-size: 20px;
      font-weight: 600;
      color: #22223B;
      line-height: 28px;
    }
    p{
      width: 354px;
      font-size: 14px;
      font-weight: 500;
      color: #333333;
      margin: 24px 0 16px;
    }
    ul{
      li{
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        line-height: 24px;
        position: relative;
        text-indent: 15px;
        &:after{
          position: absolute;
          content: '';
          left: 0;
          top: 10px;
          width: 5px;
          height: 5px;
          background: #1072E0;
          border-radius: 50%;
        }
      }
    }
  }

  .right-cont{
    margin: 32px 0 32px 32px;
    box-shadow: 0 0 2px  rgba(202, 206, 209, 0.18);
    background: #fff;

    .el-col-12,.el-col-24{
      height: 184px;
      box-sizing: border-box;
      padding: 24px 24px 0px;
      background-position: 96% 96%;
      background-repeat: no-repeat;
      background-size: 25%;
      &:first-child{
        background-image: url('~@/assets/img/home/ser-icon1.png');
        border-right: 1px solid rgba(202, 206, 209, 0.18);
        border-bottom: 1px solid rgba(202, 206, 209, 0.18);
      }
      &:nth-child(2){
        background-image: url('~@/assets/img/home/ser-icon2.png');
        border-right: 1px solid rgba(202, 206, 209, 0.18);
        border-bottom: 1px solid rgba(202, 206, 209, 0.18);
      }
      &:nth-child(3){
        background-image: url('~@/assets/img/home/ser-icon3.png');
        border-right: 1px solid rgba(202, 206, 209, 0.18);
      }
      &:nth-child(4){
        background-image: url('~@/assets/img/home/ser-icon4.png');
      }
      h4{
        font-size: 16px;
        font-weight: 500;
        color: #22223B;
        line-height: 22px;
        margin-bottom: 10px;
      }
      p{
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        line-height: 24px;
      }
    }
    .el-col-24{
      height: 136px;
      border-top: 1px solid rgba(202, 206, 209, 0.18);
      background-position: 98.5% 96%;
      background-size: 13%;
      background-image: url('~@/assets/img/home/ser-icon5.png');
    }
  }
}

.news-box{
  padding: 80px 0 ;
  h1{
    font-size: 32px;
    font-weight: 600;
    color: #22223B;
    line-height: 45px;
    letter-spacing: 1px;
  }
  .cont-view{
    margin: 32px 0;
    display: flex;
    box-shadow: 0 0 2px  rgba(202, 206, 209, 0.18);
    .left-view{
      position: relative;
      padding: 40px 32px;
      flex: 0 0 380px;
      height: 594px;
      background: url('~@/assets/img/home/news-bg.png');
      img{
        width: 314px;
        height: 183px;
      }
      h2{
        font-size: 16px;
        font-weight: 600;
        color: #22223B;
        line-height: 22px;
        margin: 24px 0 12px;
      }
      p{
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        line-height: 24px;
      }
      .more{
        display: inline-block;
        position: absolute;
        bottom: 32px;
        left: 32px;
        width: 126px;
        height: 42px;
        line-height: 42px;
        text-align: center;
        border: 1px solid #1072E0;
        font-size: 16px;
        font-weight: 500;
        color: #1072E0;
      }
    }
    .right-view{
      flex: 1;
      border:1px solid rgba(202, 206, 209, .6);
      li{
        border-bottom: 1px solid rgba(202, 206, 209, .6);
        padding: 22px 30px 22px 40px ;
        height: 198px;
        position: relative;
        h2{
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 600;
          color: #22223B;
          margin-bottom: 10px;
          @include clamp(1);
        }
        p{
          height: 80px;
          line-height: 22px;
          color: #666666;
          @include clamp(3);
        }
        span{
          position: absolute;
          bottom: 20px;
        }
      }
    }
  }
  .list-box{
    display: flex;
    .list-view{
      flex: 1;
      border:1px solid rgba(202, 206, 209, .5);
      .top{
        background: url("~@/assets/img/home/zc-bg.png")no-repeat;
        background-size: cover;
        background-position: bottom;
        padding: 0 24px;
        height: 100px;
        line-height: 100px;
        position: relative;
        h1{
          font-size: 24px;
          font-weight: 600;
          color: #22223B;
          line-height: inherit;
        }
        a{
          position: absolute;
          right: 32px;
          top: -0px;
          line-height: inherit;
          color: #1072E0;
        }
      }
      ul{
        padding: 24px;
        li{
          margin-bottom: 15px;
          strong{
            padding: 3px;
            display: inline-block;
            background: #FF6868;
            border-radius: 2px;
            font-size: 10px;
            color: #fff;
          }
          span{
            display: inline-block;
            width: calc(100% - 120px);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 16px;
            font-weight: 500;
            color: #333333;
            line-height: 22px;
            vertical-align: middle;
          }
          small{
            display: inline-block;
            float: right;
            font-size: 16px;
            font-weight: 500;
            color: #999999;
            line-height: 22px;
          }
        }
      }
      &:first-child{
        margin-right: 32px;
        .top{
          background: url("~@/assets/img/home/new-bg.png")no-repeat;
        }
      }
    }
  }
}
</style>
